<template>
  <div>
    <a-modal v-model:visible="modalVisible" @ok="save" title="查看订单" @cancel="cancle" :footer="null" width="80%">
      <a-row>
        <a-col :span="8">
          <!-- 用户信息 -->
          <a-descriptions title="用户信息" :column="1" bordered>
            <a-descriptions-item label="下单人">{{ obj.userName }}</a-descriptions-item>
            <a-descriptions-item label="性别">{{ obj.sex }}</a-descriptions-item>
            <a-descriptions-item label="ID">{{ obj.userId }}</a-descriptions-item>
            <a-descriptions-item label="服务名称">
              {{ obj.serviceName }}
            </a-descriptions-item>
            <a-descriptions-item label="服务地址">{{ obj.address }}</a-descriptions-item>
            <a-descriptions-item label="手机号">{{ obj.userMobile }}</a-descriptions-item>
            <a-descriptions-item label="服务时间">{{ obj.orderTime }}</a-descriptions-item>
            <a-descriptions-item label="完成时间">{{ obj.endTime }}</a-descriptions-item>
          </a-descriptions>
          <a-divider></a-divider>
        </a-col>
        <a-col :span="16">
          <!-- 信息详情 -->
          <a-card title="信息详情" hoverable :headStyle="headStyle">
            <a-form :labelCol="labelCol">
              <a-form-item label="健康档案">
                <a-button type="link" @click="lookHealth">查看</a-button>
              </a-form-item>
              <a-form-item label="护理报告">
                <a-button type="link" @click="lookNurseReport">查看</a-button>
              </a-form-item>
              <a-form-item label="医嘱">
                <div class="order-img" v-if="list.length > 0">
                  <a-image :width="100" v-for="item in list" :key="item" :src="item" />
                </div>
                <div v-else>无</div>
              </a-form-item>
              <a-form-item label="备注">
                {{ obj.remark ? obj.remark : '无' }}
              </a-form-item>
              <a-form-item label="服务费"> {{ obj.price }} </a-form-item>
              <!-- <a-form-item label="耗材">
            <a-card :bordered="true" hoverable style="width: 300px">
              <template #title>
                <a-button type="primary" size="small">护理包</a-button>
              </template>
              3M PICC换药包（洗必泰）*1
              冲管液10ml(含注射器）*1（PICC置管预充冲洗液护理换药封管液）
              无针密闭输液接头*1（PICC无针正压接头BD）
            </a-card>
          </a-form-item> -->
            </a-form>
          </a-card>
          <!-- 费用详情 -->
          <!-- <a-card title="费用详情" bordered :headStyle="headStyle" hoverable>
            <a-table
              :columns="fireColums"
              :data-source="fireList"
              :pagination="false"
              bordered
            >
            </a-table>
          </a-card> -->
          <a-divider></a-divider>
          <!-- 返回 -->
          <!-- <a-row>
            <a-col :span="4" :offset="8">
              <a-button type="dashed" @click="cancle">关闭</a-button>
            </a-col>
          </a-row> -->
        </a-col>
      </a-row>
      <!-- 护士信息 -->
      <a-descriptions title="护士信息" bordered :column="1">
        <a-descriptions-item label="护士">{{ obj.nick }}</a-descriptions-item>
        <a-descriptions-item label="ID">{{ obj.nurseId }}</a-descriptions-item>
        <a-descriptions-item label="手机号">{{ obj.mobile }}</a-descriptions-item>
        <a-descriptions-item label="接单时间">{{ obj.beginTime }}</a-descriptions-item>
      </a-descriptions>

      <!-- 健康档案 -->
      <health v-if="healthVisible" :visible="healthVisible" @closeModal="closeModal" :id="obj.healthId"></health>

      <!-- 护理报告 -->
      <nurse-report
        v-if="nurseReportVisible"
        :visible="nurseReportVisible"
        @closeModal="closeModal1"
        :directShow="true"
        :report="sonOrderReport"
      ></nurse-report>
    </a-modal>
  </div>
</template>
<script>
import { message, Modal } from 'ant-design-vue'
import { ref, reactive, computed, toRefs } from 'vue'
import health from '@/components/order/Health'
import NurseReport from '@/components/order/NurseReport'
import { selectSonOrderInfo } from '@/api/order/index'
export default {
  setup(props, { emit, attrs }) {
    console.log(props, 'props')
    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })
    const fireColums = [
      {
        title: '服务费',
        dataIndex: 'price'
      }
      //   {
      //     title: "合计",
      //     dataIndex: "number",
      //   },
    ]
    const fireList = [{ key: 1, price: '' }]
    const headStyle = computed(() => {
      return `background:#E6E6E6;font-weight:bold`
    })
    const healthVisible = ref(false) //是否打开健康档案弹窗
    const nurseReportVisible = ref(false) //是否打开护理报告弹窗

    const lookHealth = () => {
      healthVisible.value = true
    }
    // 关闭健康档案modal
    const closeModal = () => {
      healthVisible.value = false
    }

    // 查看护理报告
    const lookNurseReport = () => {
      nurseReportVisible.value = true
    }
    // 关闭护理报告弹窗
    const closeModal1 = () => {
      nurseReportVisible.value = false
    }
    const cancle = () => {
      emit('cancle')
    }
    const data = reactive({
      obj: {},
      sonOrderReport: {},
      list: []
    }) //子订单详情
    init()
    async function init() {
      let res = await selectSonOrderInfo(props.number, props.status)
      if (res.success) {
        data.obj = res.object
        data.sonOrderReport = res.object.nursingRecord //护理报告
        if (res.object.proveJson) {
          data.list = res.object.proveJson.split(',')
        }
      }
    }
    return {
      labelCol: { style: { fontWeight: 'bold' } },
      fireColums,
      fireList,
      headStyle,
      healthVisible,
      closeModal,
      nurseReportVisible,
      closeModal,
      lookNurseReport,
      closeModal1,
      lookHealth,
      cancle,
      ...toRefs(data),
      modalVisible
    }
  },

  components: {
    health,
    NurseReport
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    number: {
      type: String,
      default: ''
    },
    status: {
      type: Number,
      default: ''
    }
  }
}
</script>
